<!-- 企业认证列表 -->
<template>
  <div class="company-authentication">
    <el-container class="container-box">
    <el-editable :data="list.table" :columns="list.column" height="400"/>
    <el-dialog title="选择企业" width="30%" :visible.sync="dialogFormVisible" @close="closeDialog">
      <el-form :model="form" label-width="100px" ref="ruleForm" :rules="rules">
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="form.userName"  placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="选择企业" prop="companyId">
          <el-select v-model="form.companyId" remote :remote-method="searchCompanyList" :loading="searchLoading" filterable placeholder="请选择">
            <el-option
              v-for="item in downList"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="confirmToAdd">提交申请</el-button>
      </div>
    </el-dialog>
    </el-container>

  </div>
</template>
<script>
import ElEditable from '@components/el-editable/index.vue'
import {tableColumn} from './const'
import {  pageListCompanyByUser, joinCompanyApply, getCurrentUserInfo } from '@const/api_staffCenter.js';
import { companyDownList } from '@const/api_authCenter.js';
export default {
  name: 'CompanyAuthentication',
  components: {ElEditable},
  data() {
    return {
      list: {
        column: tableColumn,
        table: []
      },
      form: {
        userName: '',
        companyId: ''
      },
      dialogFormVisible: false,
      searchLoading: false,
      downList: [],
      rules: {
        userName: [
          { required: true, message: '请输入姓名', trigger: 'change' }
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        companyId: [
          { required: true, message: '请选择企业', trigger: 'change' }
        ],
      }
    }
  },
  created() {
    this.initGlobalBtn()
    this.getList()
    this.getDownList()
    this.getCurrentUserName()
    this.getRouteName()
  },
  methods: {
    getRouteName() {
      if(this.$route.query.id) {
        this.dialogFormVisible = true
        this.downList = [{
          name: this.$route.query.name,
          id: this.$route.query.id
        }]
        this.form.companyId = this.$route.query.id
      }
    },
    // 仅用来实时获取用户姓名
    getCurrentUserName() {
      this.$axios({
        method: 'post',
        url: getCurrentUserInfo
      }).then(res => {
        this.form.userName = res.data.payload.userName || ''
      }).catch(err => {
        this.form.userName = ''
      })
    },
    searchCompanyList(value) {
    this.searchLoading = true
      this.$axios({
        method: 'get',
        url: companyDownList,
        params:{
          name: value
        }
      })
      .then(res => {
        this.downList = res.data.payload || []
      }).catch(err => {
        this.downList = []
      }).finally(() => {
        this.searchLoading = false
      })
    },
    initGlobalBtn() {
      let obj = {
        type: 'btn',
        arr: [
          {
            val: '添加',
            type: 'primary',
            // icon: 'el-icon-arrow-left',
            handle: this.addNewCompany
          }
        ]
      }
      this.$store.commit('changeLayoutHandle', obj)
    },
    addNewCompany() {
      this.dialogFormVisible = true
    },
    closeDialog(){
      this.$refs['ruleForm'].resetFields();
      this.dialogFormVisible = false
    },
    // 提交
    confirmToAdd() {
      this.$refs['ruleForm'].validate((valid) => {
        if (valid) {
          this.$axios({
            method: 'post',
            url: joinCompanyApply,
            data: {
              ...this.form
            }
          })
          .then(res => {
            console.log(res)
            if(res.data.code === '0'){
              this.$message.success('添加成功')
              this.getList()
              this.dialogFormVisible = false
            }
          })
        }
      })
    },
    // 获取公司list
    getDownList(){
      this.$axios({
        method: 'get',
        url: companyDownList
      })
      .then(res => {
        this.downList = res.data.payload || []
      })
    },
    // 获取列表数据
    getList() {
      this.$axios({
        method: 'get',
        url: pageListCompanyByUser,
        data: {
          page: 1,
          pageSize: 100
        }
      })
      .then(res => {
        this.list.table = res.data.payload.content || []
      })
    }
  }
}
</script>
<style lang="less">
.company-authentication {
  height: 100%;
  overflow: auto;
  .container-box {
    height: 100%;
    overflow: auto;
  }
  .el-input,
  .el-input__inner {
    width: 221px;
  }
  .el-dialog__body {
    padding-bottom: 80px;
  }
}
</style>
